import React, { Component } from 'react';

import { option } from "./static/mapline.js" //option 基础配置
import { dealOption } from "./util/dealdata.js" // 处理 option 的函数
import { mapdata } from "./static/mapdata.js" //地图数据
import { Button, Table, Radio, Input } from 'antd';
import './testmap.less'

const { echarts } = window
let { clusterWarehousing, clusterMileage } = mapdata;

export default class Chinamap extends Component {
  constructor() {
    super()
    this.state = {
      mapInit: null,
      myChart: null,
      mode: 'top',
      aging: 1,
      k: 0
    }
  }
  handleModeChange = e => {
    const mode = e.target.value;
    this.setState({ mode });
  };
  mapInit = () => {
    let mapInit = document.getElementById("mainMap");
    this.state.myChart = echarts.init(mapInit);
    this.setState(this.state);
    this.state.myChart.setOption(option, true);
  }
  componentDidMount() {
    this.mapInit()
    this.useClick()
  }
  useClick = () => {
    let { myChart } = this.state;
    let myOption = dealOption({option, clusterWarehousing});
    myChart.setOption(myOption, true);
  }
  rtadioOnChange = e => {
    this.setState({
      aging: e.target.value
    });
  };
  inputChange = (val) => {
    let { value } = val.target;
    let newValue = Number(Math.floor(value));
    this.setState({ k: newValue });
  }
  render() {
    const { mode, k, aging  } = this.state;
    let tableRightWidth = 600;
    return (
      <div className="mapuse common-map">
        {/* <header className="header">
          <div className="header-btn">
            <Radio.Group onChange={this.rtadioOnChange} value={aging}>
              <Radio.Button value={1}>最优成本</Radio.Button>
              <Radio.Button value={2}>时效最优</Radio.Button>
            </Radio.Group>
            <input value={k} onChange={this.inputChange} />
          </div>
          <div className="header-pro">
            <Button type="primary" onClick={this.useClick}>运行</Button>
          </div>
        </header> */}
        <div style={{ width: "100%", height: "calc(100% - 30px)" }} className="container">
          <div style={{ width: '100%', height: "100%" }} className="map-container">
            <div id="mainMap" style={{ width: "100%", height: "100%" }}/>
          </div>
        </div>
      </div>
    )
  }
}
